<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<style>
  .add-template {
    padding: 15px 25px 0 0;
  }
</style>
<div class="add-template">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">模板类型</label>
      <div class="layui-input-block">
        <select name="templateType" lay-verify="required">
          <option value="beetl">beetl</option>
          <option value="velocity">velocity</option>
          <option value="freemarker">freemarker</option>
          <option value="thymeleaf">thymeleaf</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">模板名称</label>
      <div class="layui-input-block">
        <input type="text" name="templateName" lay-verify="required" lay-reqtext="模板名称是必填项" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">模板描述</label>
      <div class="layui-input-block">
        <input type="text" name="templateDesc" lay-verify="required" lay-reqtext="模板描述是必填项" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit lay-filter="addTemplate">保存</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>
<script>
  layui.use('form', function(){
    var $ = layui.$,
      form = layui.form,
      table = layui.table;

    //监听提交
    form.on('submit(addTemplate)', function(data){
      $.ajaxSetup({
        traditional: true,
        contentType: 'application/json;charset=utf-8'
      })

      $.post('/code/template', JSON.stringify(data.field), function (response) {
        layer.closeAll('page')
        layer.msg(response.data, {
          time: 1000,
          icon: 1
        })
        table.reload('templates')
      }, 'json')
      return false;
    });
    form.render()
  });
</script>
</html>
